<template>
    <section class="relate mb8">
        <h3 class="re-title">{{title}}</h3>
        <ul class="text-list">
            <li v-for="t in text"><a class="ellipsis" v-link="{name: 'detail', params: {id: t.id, cid: cid, tid: tid}}">{{t.title || t.content}}</a></li>
        </ul>
        <pic-list v-if="img" :img="img"></pic-list>
    </section>
</template>

<script>
import PicList from './PicList.vue'
export default {
    name: 'contentRelate',
    components: {
        PicList
    },
    data () {
        return {
            cid: this.$route.params.cid,
            tid: this.$route.params.tid,
        }
    },
    props: {
        text: Array,
        img: Array,
        title: String
    }

}
</script>

<style>

    .relate{
        padding-top: 4px;
        background-color: #fff;
    }

    .relate a{
        display: block;
        width: 100%;
        height: 100%;
    }

    .relate .re-title{
        padding-left: 15px;
        font-size: 15px;
        font-weight: 600;
        line-height: 40px;
        color: #151515;
    }

    .relate .text-list{
        padding: 0 15px 8px;
        border-bottom: 1px solid #dfdfdf;
        font-size: 12px;
        line-height: 38px;
        color: #151515;
    }

    .text-list li{
        position: relative;
    }

    .text-list li:before{
        content: '';
        position: absolute;
        right: 0;
        top: 12px;
        width: 15px;
        height: 15px;
        background-size: 100% 100%;
        background-image: url('/static/images/sprite/icon_ellipsis.png');
    }

    .text-list a{
        width: 80%;
    }

</style>

